<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>user2</title>
  <style>
    #mes {
      width: 300px;
      height: 300px;
      border: 1px solid #666;
      overflow: auto;
      margin-bottom: 10px;
      padding: 5px;
    }

    li {
      text-decoration: none;
      background: #f4f4f4;
      padding: 5px;
      margin-top: 5px;
    }

    .tl {
      color: purple;
      text-align: left;
    }

    .tr {
      color: green;
      text-align: right;
    }
  </style>
</head>

<body>
  <ul id="mes"></ul>
  <div class="kuang">
    <input type="text" value="" class="int">
    <button class="send">发送</button>
  </div>
  <script>
    var mes = document.getElementById("mes");
    if (window.WebSocket) {
      var ws = new WebSocket('ws://172.16.11.83:8001');
      ws.onopen = function (e) {
        console.log("连接服务器成功");
        ws.send("user2");
      }

      ws.onmessage = function (e) {
        if (e.data !== "user1" && e.data !== "user2") {
          console.log(e);
          var newData = JSON.parse(e.data);
          var node = document.createElement("LI");
          var textnode = document.createTextNode(newData.mes);
          node.appendChild(textnode);
          if (newData.name === "user1") {
            console.log('name', newData.name)
            node.classList.add("tl")
            mes.appendChild(node);
          } else {
            node.classList.add("tr")
            mes.appendChild(node);
          }
        }
        document.querySelector(".send").onclick = function (e) {
          var obj = {
            name: "user2",
            mes: document.querySelector(".int").value
          }
          ws.send(JSON.stringify(obj));
          document.querySelector(".int").value = "";
        }
      }

      ws.onclose = function (e) {
        console.log("服务器关闭");
      }

      ws.onerror = function () {
        console.log("连接出错");
      }
      document.onkeydown = function (e) {

        //兼容FF和IE和Opera

        var theEvent = window.event || e;

        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;

        if (code == 13) {

          //写你需要做的操作，我这里是再次触发搜索按钮的点击事件

          // $(".search").trigger("click");
          var obj = {
            name: "user1",
            mes: document.querySelector(".int").value
          }
          ws.send(JSON.stringify(obj));
          document.querySelector(".int").value = "";

        }

      }
    }
  </script>
</body>

</html>